<template>
	<el-card shadow="hover">
		<el-form v-if="showSearch" ref="queryFormRef" :model="queryParams" inline>
			<el-form-item label="角色名称" prop="role_name">
				<el-input v-model="queryParams.role_name" placeholder="请输入角色名称" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="top-block">
			<el-col :span="1.5">
				<el-button @click="onOperation({ type: 'add', title: '添加角色' }, {})" type="primary" plain icon="el-icon-plus"> 添加角色 </el-button>
			</el-col>
			<RightToolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-table :data="tableList" v-loading="loading" size="small">
			<el-table-column prop="id" label="ID" align="center" />
			<el-table-column prop="role_name" label="角色名称" align="center" />
			<el-table-column prop="display_order" label="排序" align="center" />
			<el-table-column prop="createdate" label="创建时间" align="center" :formatter="formatterCreateTime" />
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{ row }">
					<el-button
						type="text"
						@click="onOperation({ type: 'edit', title: '编辑角色' }, row)"
						:disabled="row.is_admin ? true : false"
					>
						编辑
					</el-button>
					<el-popconfirm title="您确定删除该数据？此操作不可撤回" @confirm="onDelete(row)">
						<template #reference>
							<el-button type="text" link :disabled="row.is_admin ? true : false"> 删除 </el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<PaginationComponent
			v-show="total > queryParams.pageSize"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<RoleOperationDialog ref="roleOperationDialogRef" />
	</el-card>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import { roleApi } from '/@/api/admin/index';
import { timeDictionary } from '/@/utils/dictionaryTranslation';
import RoleOperationDialog from './dialog/roleOperationDialog.vue';

const RoleApi = roleApi();
export default {
	name: 'systemRole',
	components: { RoleOperationDialog },
	setup() {
		const queryFormRef = ref(null);
		const roleOperationDialogRef = ref(null);
		const state = reactive({
			showSearch: true,
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				role_name: '',
			},
			tableList: [],
			loading: false,
			total: 0,
		});
		//生命周期
		onMounted(() => {
			getList();
		});
		/********** 点击事件 **********/
		// 查询
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 重置查询
		const onResetQuery = () => {
			(queryFormRef.value as any)?.resetFields();
			onQuery();
		};
		// 添加/编辑角色
		const onOperation = (data: any, row: any) => {
			(roleOperationDialogRef.value as any)?.openDialog(data, row, () => getList());
		};
		// 删除角色
		const onDelete = (row: any) => {
			_roleDelete({ role_id: row.id });
		};

		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			_roleList(state.queryParams);
		};
		// 创建时间
		const formatterCreateTime = (row: any) => {
			return timeDictionary(row.createdate);
		};

		/********** 网络事件 **********/
		// 角色列表
		const _roleList = (params: object) => {
			RoleApi.roleList(params)
				.then((res: any) => {
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => (state.loading = false));
		};
		// 删除角色
		const _roleDelete = (params: object) => {
			RoleApi.roleDelete(params)
				.then(() => {
					getList();
					ElMessage.success('操作成功！');
				})
				.catch(() => {});
		};
		return {
			queryFormRef,
			roleOperationDialogRef,
			onQuery,
			onResetQuery,
			onOperation,
			onDelete,
			getList,
			formatterCreateTime,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
